<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>

<body>
  <div class="" id="view2">

  </div>
  <div id="view">
    <div class="">
      {{firstnum}}(<button type="button" name="button" onclick="--vm.firstnum">-</button><button type="button" name="button" onclick="++vm.firstnum">+</button>)
    </div>
    +
    <div class="">
      {{secondnum}}(<button type="button" name="button" onclick="--vm.secondnum">-</button><button type="button" name="button" onclick="++vm.secondnum">+</button>)
    </div>
    =
    <div class="">
      {{resultnum()}}(<button type="button" name="button" onclick="--vm.result">-</button>
      <button type="button" name="button" onclick="++vm.result">+</button>)
({{lastnum}})
    </div>
  </div>

  <script type="text/javascript">
      const vm = new Vue({
        el:"#view",
        data: {
          firstnum:10,
          secondnum:25
        },
        methods:{
          resultnum(){
            return this.firstnum + this.secondnum;
          }
        },
        computed:{
          lastnum(){
            return this.firstnum + this.secondnum;
          },
          result:{
            get(){
             return  this.firstnum + this.secondnum;
           },
           set(v){
             this.firstnum = v/2;
             this.secondnum = v/2;
           }
          }
        }
      })
  </script>
</body>

</html>
